<!--
  - Copyright (c) 2021.  北京维数科技有限公司
  - Date :  2019/4/8
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.0.0
  -->
<template>
  <div class="app-container rule-list-container">
    <el-container>
      <div class="flex-left-pannel flex-left-pannel__noright">
        <el-row>
          <div class="xf-tabletop-handles">
            <div class="xf-tabhd-left">
              <el-button class="filter-item" @click="handleCreate" type="primary" size="mini">添加规则</el-button>
            </div>
          </div>
        </el-row>
        <el-table
          key='tableKey'
          :data="list"
          v-loading.body="listLoading" fit style="width: 100%">
          <el-table-column label="推送规则">
            <template slot-scope="scope">
              <span>{{scope.row.ruleName}}</span>
            </template>
          </el-table-column>
          <el-table-column label="规则描述">
            <template slot-scope="scope">
              <span>{{scope.row.ruleDescription}}</span>
            </template>
          </el-table-column>
          <el-table-column label="所属系统">
            <template slot-scope="scope">
              <span>{{scope.row.channelName}}</span>
            </template>
          </el-table-column>
          <el-table-column label="推送间隔">
            <template slot-scope="scope">
              <span>{{scope.row.intervalTimeTxt}}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建时间">
            <template slot-scope="scope">
              <span>{{scope.row.crtTime}}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建人">
            <template slot-scope="scope">
              <span>{{scope.row.crtUserName}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180" fixed="right">
            <template slot-scope="scope">
              <el-button size="small" type="text" @click="handleManage(scope.row)">
                管理
              </el-button>
              <el-button size="small" type="text" @click="createDel(scope.row)">
                 删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div v-show="!listLoading" class="sensor-pagination-container">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[10,15,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
        </div>
      </div>
    </el-container>
    <slider-panel :Show.sync="dialogFormVisible" custom-class="out-side-frame">
      <div class="form-content-frame">
        <el-form :model="ruleForm" ref="addruleForm" :rules="rules" label-width="100px" label-position='top' @submit.native.prevent>
          <el-form-item label="规则名" prop="ruleName">
            <el-input v-model="ruleForm.ruleName" placeholder="请输入规则名" style="width: 100%" maxlength="15">
            </el-input>
          </el-form-item>
          <el-form-item label="所属系统" prop="channelId">
            <el-select v-model="ruleForm.channelId" placeholder="请选择所属系统" style="width:100%">
              <el-option v-for="item in selectChannel" :key="item.id" :label="item.channelName" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="推送间隔" prop="intervalTimeMinutes">
            <el-select v-model="ruleForm.intervalTimeMinutes" placeholder="请选择推送间隔" style="width:100%" @change="getIntervText">
              <el-option v-for="(item,index) in intervalTime" :key="index" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="规则描述" prop="ruleDescription">
            <el-input v-model="ruleForm.ruleDescription" placeholder="请输入规则描述" style="width: 100%" maxlength="50">
            </el-input>
          </el-form-item>
            <el-button v-if="dialogStatus==='create'" type="primary" @click="create('addruleForm')" size="mini" native-type="submit">确 定</el-button>
            <el-button @click="cancel('addruleForm')" type="text" size="mini">取 消</el-button>
        </el-form>
      </div>
    </slider-panel>
    <el-dialog title="删除规则" :visible.sync="dialogDeleteVisible" :show-close='false' custom-class="xf-jc-dialog" width="360px">
      <div class="xf-jc-deletect">
        <p v-if="relationUser<1">确定删除此条规则吗？</p>
        <p v-else>有{{relationUser}}个用户启用此规则，删除前请先停用规则。</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="dialogDeleteVisible = false" v-if="relationUser>0">知道了</el-button>
        <el-button type="danger" size="mini" @click="deleteD()" v-if="relationUser<1">删除</el-button>
        <el-button type="text" size="mini" @click="dialogDeleteVisible = false" v-if="relationUser<1">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    page,
    affiliated,
    addObj,
    delQuery,
    delObj
  } from "@/api/datahandler/pushRules/index";
  import sliderPanel from '@/components/SliderPanel'

  export default {
    name: "pushRules",
    components: {sliderPanel},
    data() {
      return {
        currentId:'',
        ruleId:'',
        delid:'',
        relationUser:0,
        visible2: false,
        list: null,
        total: null,
        listLoading: true,
        listQuery: {
          page: 1,
          limit: 15,
        },
        selectChannel:[],
        selectnoticeType:[
          {
            type:'1',
            noticeTypeName:'报警通知'
          },
          {
            type:'2',
            noticeTypeName:'故障通知'
          }
        ],
        intervalTime:[
          {
            value:60,
            label:"1小时"
          },
          {
            value:60*24,
            label:'1天'
          },
          {
            value:60*24*7,
            label:'7天'
          }
        ],
        intervalTimeTxt:'',
        ruleForm:{
          ruleName:'',
          channelId:'',
          intervalTimeMinutes:'',
          ruleDescription:'',
        },
        rules:{
          ruleName:[
            {
              required: true,
              message: "请输入规则名",
              trigger: "blur"
            },
            {
              min: 1,
              max: 15,
              message: "最多允许输入15个字符",
              trigger: "blur"
            }
          ],
          channelId:[
            {
              required: true,
              message: "请选择所属系统",
              trigger: "change"
            }
          ],
          intervalTimeMinutes:[
            {
              required: true,
              message: "请选择推送间隔",
              trigger: "change"
            }
          ]
        },
        dialogFormVisible: false,
        dialogFormChildVisible: false,
        dialogDeleteVisible: false,
        dialogStatus: "",
        textMap: {
          create: "添加推送规则"
        },
        tableKey: 0,
        currentSelectObj: {}
      };
    },
    created() {
      this.getList();
    },
    methods: {
      createDel(row){
        //删除前查询
        this.delid = row.id;
        delQuery({id:row.id}).then(res=>{
            this.relationUser = res.data;
            this.dialogDeleteVisible=true;
        });
      },
      getIntervText(val){
          let textObj = this.intervalTime.find(item=>item.value===val);
          this.intervalTimeTxt = textObj.label;
      },
      getchannels(){
      //所属系统菜单选择
        affiliated().then(res=>{
          this.selectChannel = res.data;
        })
      },
      deleteD(){
        this.dialogDeleteVisible = false;
        delObj({id:this.delid}).then(() => {
          this.$notify({
            title: "成功",
            message: "删除成功",
            type: "success",
            duration: 2000
          });
          this.listQuery.page = 1;
          this.getList();
        });
      },
      tableQuery() {
        this.getList();
      },
      handleManage(row){
        //跳转管理页面
        this.ruleId = row.channelId;
        this.$router.push({
          path: `/adminSys/manageRules/${row.channelId}`,
          query:{
            noticeRuleId:row.id,
          }
        })
      },
      handleCreate() {
        this.dialogStatus = "create";
        this.getchannels();
        this.dialogFormVisible = true;
      },
      create(formName) {
        const set = this.$refs;
        set[formName].validate(valid => {
          if (valid) {
            addObj(Object.assign(this.ruleForm,{intervalTimeTxt:this.intervalTimeTxt})).then((res) => {
              if (res.status===200){
                this.dialogFormVisible = false;
                this.getList();
                this.$notify({
                  title: "成功",
                  message: "添加成功",
                  type: "success",
                  duration: 2000
                });
                this.$refs[formName].resetFields();
              }
            });
          } else {
            return false;
          }
        });
      },
      cancel(formName) {
        this.dialogFormVisible = false;
        this.$refs[formName].resetFields();
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      },
      getList() {
        this.listLoading = true;
        page().then(res => {
          this.list = res.data.rows;
          this.total = res.data.total;
          this.listLoading = false;
        });
      }
    },
    mounted() {

    },
  };
</script>
<style rel="stylesheet/scss" lang="scss">
  .sensor-pagination-container{
    display:flex;
    justify-content:space-between;
    padding:10px 10px;
  }
  .rule-list-container{
    padding-top: 0;
    .sensor-pagination-container{
      justify-content: flex-end;
    }
  }
  .el-time-spinner{
    box-sizing: content-box;
  }
  .flex-left-pannel__noright {
    padding-right: 0;
  }
  .xf-input-withbtn__rightbtn {
    border: 0;
    height: 34px;
    margin-top: -8px !important;
  }
  .fulldialog > div {
    width: 500px;
    margin: 0 auto;
  }
  .fulldialog .el-dialog__title {
    font-size: 32px;
  }
  .device-add-dialog {
    .el-dialog__title {
      font-size: 32px;
    }
    .el-dialog__header {
      margin-top: 20px;
    }
    .custom-dialog-btn {
      position: absolute;
      font-size: 30px;
      left: 40px;
      top: 20px;
      color: #fff;
      &:hover {
        cursor: pointer;
      }
    }
    .dialog-footer {
      text-align: left;
    }
  }
  // 精准查询
  .xf-double-form{
    .xf-dbform-item{
      display: flex;
      justify-content: space-between;
      .xf-dbform-item__sleft{
        .el-input{
          width: 320px;
        }
      }
      .xf-dbform-item__sright{
        .el-input{
          width: 320px;
        }
      }
    }
  }
</style>
